<template>
	<view>
		
		<ttBar title=" " leftIcon="icon-back" :bgColor="ttBg" :color="wdColor" :showZhanwei="false" :isShare="1">
		</ttBar>
		<image class="couponBg" src="http://m.qpic.cn/psc?/V10bU8y22MQDQX/TmEUgtj9EK6.7V8ajmQrEHG8eIw6aJbNTEGi1LMXT98JhmQPhe3fVLQ8PzSDA4B606y11r5PieOLHScr6ZeCFSeUge*LCcaojAQnbphxHLg!/b&bo=7gIwAgAAAAADJ9w!&rf=viewer_4" mode="widthFix"></image>
		<view class="box">
			<text class="title">天天好券</text>
			<view class="couponList">
				<block v-for="(item,index) in dataList" :key="index">
					<view class="couponItem" >
						<text class="couponType">牛牛券</text>
						<text class="couponValue">￥{{item.discount}}</text>
						<text class="couponLimit">满{{item.amount}}元可用</text>
						<text class="couponRule">全品类（特例课程除外）</text>
						<view class="lineBox">
							<view class="circle"></view>
							<view class="line"></view>
							<view class="circle"></view>
						</view>
						<!-- #ifndef H5 -->
						<text class="btn" @tap="receiveCoupon(index)">立即领取</text>
						<!-- #endif -->
						
					</view>
					
				</block>
				
				
			</view>
			
		</view>
		<empty-box type="coupon" v-if="dataList.length<1"></empty-box>
		<hkModal ref="hkModal"></hkModal>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components:{
		},
		computed: {
			...mapState({
				isLogin:state=>state.user.isLogin,
				userInfo: state => state.user.userInfo,
			})
		},
		
		data() {
			return {
				id:0,
				hasNext:true,
				page_no:1,
				page_size:10,
				dataList:[],
				ttBg:'rgba(0,0,0,0)',
				wdColor:'#ffffff'
			};
		},
		methods:{
			getData(){
				if(this.hasNext){
					this.$store.dispatch("apiGetCatchCouponList",{
						userId:this.id,
						page_no:this.page_no,
						page_size:this.page_size
					}).then(res=>{
						if(res.data.data.items.length>0){
							this.dataList=this.dataList.concat(res.data.data.items);
							this.page_no=res.data.data.nextPage;
							this.hasNext=res.data.data.hasNext
						}
					})
				}else{
					uni.showToast({
						title: '没有更多的数据了',
						icon: 'none'
					});
				}
			},
			share(){
				uni.$emit("showShare",{
					type:7,		
					id:0
				})
				this.$refs.shareAction.open()
			},
			receiveCoupon(e){
				if(this.isLogin){
					let _index=parseInt(e);
					this.$store.dispatch("apiReceiveCoupon",{
						couponId:this.dataList[_index].id,
						userId:this.userInfo.userId
					}).then(res=>{
						if(res.data.code==1){	//领取成功
							uni.showToast({
								title: '领取成功',
								icon: 'none'
							});
						}else{
							uni.showToast({
								title: '领取失败，'+res.data.msg,
								icon: 'none'
							});
						}
					})
					
				}else{
					this.toPage("login")
				}
			}
		},
		onLoad(opt) {
			if(this.isLogin){
				this.id=this.userInfo.userId
			}else{
				this.id=opt.id
			}
			this.getData();
		},
		onShareAppMessage(res) {
			let _href='';
			if(this.isLogin){
				_href='pages/index/index?url=couponList&uid='+this.userInfo.userId
			}else{
				_href='pages/index/index?url=couponList'
			}
			return {
				title: '找培训--抢神券！',
				path: _href,
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.dataList=[];
				this.hasNext=true;
				this.page_no=1;
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f6f6f6;
	}
	.couponBg{
		width: 100%;
	}
	.box{
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		margin-top: -90upx;
		margin-left: 16upx;
		margin-right: 16upx;
		position: relative;
		z-index: 9;
		box-shadow: 0rpx 5rpx 24rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 16upx;
		.title{
			font-size: 32upx;
			font-weight: bold;
			padding: 20upx 18upx;
		}
		.couponList{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 40upx;
			.couponItem{
				width: 46%;
				display: flex;
				flex-direction: column;
				background:linear-gradient(225deg,#fff7f6,#ffece6);
				border-radius: 20upx;
				overflow: hidden;
				align-items: center;
				margin-bottom: 40upx;
				.couponType{
					font-size: 28upx;
					background: linear-gradient(to left,#ff2221,#ff7e6f);
					color: #FFFFFF;
					align-self: flex-start;
					padding: 2upx 20upx;
					border-bottom-right-radius: 20upx;
					
				}
				.couponValue{
					font-size: 60upx;
					font-weight: bold;
					color: #313131;
				}
				.couponValue:first-letter{
					font-size: 40upx;
				}
				.couponLimit{
					font-size: 28upx;
					font-weight: bold;
					color: #313131;
				}
				.couponRule{
					font-size: 24upx;
					color: #696969;
					text-align: center;
					margin: 10upx 0;
				}
				.lineBox{
					display: flex;
					align-items: center;
					width: 100%;
					.circle{
						width: 20upx;
						height: 20upx;
						border-radius: 50%;
						background-color: #FFFFFF;
						flex-shrink: 0;
					}
					.line{
						height: 1px;
						flex-grow: 1;
						border-top: 1px dashed #e8c8bf;
					}
					.circle:first-child{
						margin-left: -10upx;
					}
					.circle:last-child{
						margin-right: -10upx;
					}
				}
				.btn{
					background-color: rgba(0,0,0,0);
					font-size: 36upx;
					font-weight: bold;
					color: #ff2826;
					padding: 0;
					margin: 0;
					margin-top: 6upx;
					margin-bottom: 20upx;
					text-decoration: none;
				}
			}
		}
	}
	.rIcon{
		font-size: 40upx;
		font-weight: normal;
		width: 70upx;
		height: 70upx;
		margin-right: -10upx;
		text-align: center;
		line-height: 70upx;
	}
</style>
